React Props 클린코드

function Component({ value }){


}

불필요한 Props 복사 및 연산

상위 컴포넌트로부터 전달받은 Props값을 불필요하게 복사하거나, 불필요한 연산을 추가하는 경우가 있다. 다음과 같은 상황이다.

// Anti Pattern

function Component({ value }){

  const [copyValue] = useState(연산처리(value));

  return <div>{copyValue}</div>;

}

위 코드의 목적은 상위 컴포넌트로부터 전달 받은 Props를 연산처리 한 후 렌더링하는 것이다. 연산처리를 위해 Props의 복사본을 저장하는 것은 자연스럽다. 하지만 위 패턴의 실수는 복사본을 상태값으로 저장하였고, 불필요한 연산처리까지 추가하여 초기화하고 있는 것이다. 따라서 컴포넌트가 렌더링될 때 마다 불필요한 연산을 발생시킬 수 있다. 다음과 같이 코드를 개선해보자.

// Clean code

function Component({ value }){

  const [copyValue] = useMemo(() => 연산처리(value), [value]);

  return <div>{copyValue}</div>;

}

해당 코드는 useMemo를 통해 불필요한 연산처리를 최적화하였다. 이제 전달받은 Props에 변화가 생기지 않는 이상, 컴포넌트가 리렌더링되어도 이전과 같은 연산을 재반복할 필요가 없어졌다.

...Props (스프레드 연산자) 주의하기

하위 컴포넌트로 Props를 넘겨줄 때 ...Props와 같은 방식으로 스프레드 연산자를 넘겨주는 경우가 있다. 전달해야하는 Props가 많을 때 스프레드 연산자는 간편하지만, 결과적으로 코드를 예측하기 어려워지는 문제가 발생할 수 있다. 이러한 경우 Props를 분리하여 관리/예측 가능한 상태로 전달하는 방법을 찾아볼 수 있다.

// Anti pattern

function ParentComponent(props) {

  return(
   <ChildComponent
        {...props}
    />
  )
}



// Clean code

function ParentComponent(props) {

  const { not_using_props, using_props, ...rest_props } = props;
  return(
   <ChildComponent
        using_props = {using_props}
        {...rest_props}
    />
  )
}

첫 번째 코드는 부모 컴포넌트가 자식에게 스프레드연산자를 통해 props를 그대로 전달하고 있다. 이러한 경우 앞선 설명했듯이 props를 관리하게 되지 못하는 문제가 생긴다. 자식 컴포넌트에서 사용하지 않는 props나 크게 중요하지 않는 props까지 한 번에 넘겨주기 때문에 관리적 측면에서 유용하지 않다. 이를 예방하기 위해 부모 컴포넌트 단에서 자식에게 넘겨줄 props의 우선순위를 분리한 후 넘겨주었다. 이처럼 props의 우선순위를 분리하고 명시하여 넘겨주는 방식을 통해 코드를 개선할 수 있다.

단순하게 Props 내리기